/* eslint-disable max-lines */
import React from 'react';
import TauTable from '@/components/TauTable';
import { useStore } from '@/hooks';
import { t } from '@lingui/macro';
import { uniqueId } from 'lodash';
import { observer } from 'mobx-react-lite';
import { column } from '../../stores/definitions_chart';
import Styles from './SceneTable.module.scss';
// import data from '../../stores/mock/sceneBar';

const tableId = uniqueId('tauTable-');

function Activity({ scene }) {
  const { activityStore: store } = useStore();

  return (
    <>
      <div className={Styles.title}>{t`场景列表:`}</div>
      <TauTable
        instanceId={tableId}
        primaryKey="id"
        tableLayout="fixed"
        hidePagination
        dataSource={scene || []}
        columns={[
          { title: t`序号`, dataIndex: 'idx', width: 44, cell: (v, i) => store.idx(i) },
          column('sourceName', {}),
          column('clickCount', {}),
          column('orderCount', {}),
          column('registerCount', {}),
        ]}
      />
    </>
  );
}

export default observer(Activity);
